import React, { Fragment } from 'react';
import { Link, Redirect, Switch, Route } from 'dva/router';
import QueueAnim from 'rc-queue-anim';
import DocumentTitle from 'react-document-title';
import { Icon } from 'antd';
import GlobalFooter from '../components/GlobalFooter';
import styles from './UserLayout.less';
import { getRoutes } from '../utils/utils';

const links = [{
  key: 'about',
  title: '关于作者',
  href: '',
}, {
  key: 'case',
  title: '相关案例',
  href: '',
}, {
  key: 'contact',
  title: '联系方式',
  href: '',
}];

const copyright = <Fragment>Copyright <Icon type="copyright" /> 2018 前端工程师 journeyIT 出品</Fragment>;

class UserLayout extends React.PureComponent {
  getPageTitle() {
    const { routerData, location } = this.props;
    const { pathname } = location;
    let title = 'Journey Ant Design Project';
    if (routerData[pathname] && routerData[pathname].name) {
      title = `${routerData[pathname].name} - Journey Ant Design Project`;
    }
    return title;
  }
  render() {
    const { routerData, match } = this.props;
    return (
      <DocumentTitle title={this.getPageTitle()}>
        <div className={styles.container}>
          <div className={styles.content}>
            <QueueAnim delay={300} type="top">
              <div className={styles.top} key="1">
                <div className={styles.header}>
                  <Link to="/">
                    <span className={styles.title}>Journey Ant Design</span>
                  </Link>
                </div>
                <div className={styles.desc}>Journey Ant Design Project 是由前端工程师 journeyIT 开发</div>
              </div>
              <div key="2">
                <Switch>
                  {getRoutes(match.path, routerData).map(item =>
                    (
                      <Route
                        key={item.key}
                        path={item.path}
                        component={item.component}
                        exact={item.exact}
                      />
                    )
                  )}
                  <Redirect exact from="/user" to="/user/login" />
                </Switch>
              </div>
              <div key="3">
                <GlobalFooter links={links} copyright={copyright} />
              </div>
            </QueueAnim>
          </div>
        </div>
      </DocumentTitle>
    );
  }
}

export default UserLayout;
